接下來是實作圖片 Component。

圖片可以分為兩種提供方式，一個是直接給 url ，這最簡單，直接參考前面的 text，把使用者給的 url 塞進去就好。

type imageComp struct {
	Type string `json:"type"`
	ID   string `json:"id"`
	Src  string `json:"src"`
}

func newImageComponent(id string, src string) *imageComp {
	return &imageComp{
		Type: "image",
		ID:   id,
		Src:  src,
	}
}

func ImageByURI(c *tgframe.Container, uri string) {
	id := fmt.Sprintf("img_%x", md5.Sum([]byte(uri)))
	c.Comps = append(c.Comps, newImageComponent(id, uri))
}

前端:

function createImage(comp) {
    const imgDiv = document.createElement('div')
    const newImage = document.createElement('img')
    newImage.src = comp.src
    newImage.id = comp.id
    imgDiv.appendChild(newImage)
    return imgDiv
}

但是假如使用者持有的是 golang 裡面的 image ，那需要多幾步：

• 決定好輸出 mime，不同的影像格式有不同的大小和清晰程度。
• 輸出成 []byte 後再轉成 base64 的 Data URL。

這裡我們先直接指定 MIME 為 png，之後再考慮要怎麼追加 Optional Parameter 在介面上。

func Image(c *tgframe.Container, img image.Image) {
	var imageBuf bytes.Buffer
	err := png.Encode(&imageBuf, img)
	if err != nil {
		panic(err)
	}

	bs := imageBuf.Bytes()
	b64 := base64.StdEncoding.EncodeToString(bs)
	src := fmt.Sprintf("data:image/png;base64,%s", b64)
	id := fmt.Sprintf("img_%x", md5.Sum(bs))
	c.Comps = append(c.Comps, newImageComponent(id, src))
}